<template>
  <div>
    <div class="b-line" />
    <div class="b-title mb-16">设备总览</div>
    <el-row :gutter="20" class="item-list plr-24">
      <el-col
        v-for="item in colums"
        :key="item.prop"
        :span="8"
        class="item-card"
        :xs="12"
      >
        <div class="flex">
          <img :src="item.icon" alt="" />
          <div class="flex-1">
            <div class="font-bold font-20">
              {{ props.data[item.prop] || 0 }}
            </div>
            <div class="font-14">{{ item.label }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import icon1 from "@/assets/board/icon1.png";
import icon2 from "@/assets/board/icon2.png";
import icon3 from "@/assets/board/icon3.png";
import icon4 from "@/assets/board/icon4.png";
import icon5 from "@/assets/board/icon5.png";
import icon6 from "@/assets/board/icon6.png";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});

const colums = [
  { label: "设备总数", prop: "totalCount", icon: icon1 },
  {
    label: "在线数量",
    prop: "onlineDeviceCount",
    icon: icon2
  },
  {
    label: "离线数量",
    prop: "offlineDeviceCount",
    icon: icon3
  },
  { label: "在库工具", prop: "inStockCount", icon: icon4 },
  {
    label: "在位工具",
    prop: "inCabinetCount",
    icon: icon5
  },
  { label: "门禁报警次数", prop: "warnCount", icon: icon6 }
];
</script>

<style scoped lang="scss">
.item-list {
  box-sizing: border-box;
  img {
    width: 2vw;
    height: 2vw;
    margin-right: 0.4vw;
  }
  .item-card {
    & > div {
      align-items: center;
      box-shadow: inset 0px 0px 1vw 0px rgba(65, 124, 255, 0.5);
      margin-bottom: 1vh;
      border-radius: 0.2vw;
      padding: 0.5vw;
      white-space: nowrap;
    }
    .font-bold {
      color: #f0b74c;
    }
  }
}
</style>
